<template>
    <div>
        <div class="header">
            <div>
                <el-input placeholder="请输入管理员名称" v-model="form.username" class="headerinput"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="getData">搜索</el-button>
            </div>
            <div class="rightbtn">
                <el-button type="primary" icon="el-icon-edit" @click="bianji(2)">添加</el-button>
            </div>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="管理员ID" width="180" align="center"></el-table-column>
            <el-table-column prop="username" label="管理员名称" align="center"></el-table-column>
            <el-table-column prop="roleIds" label="管理员角色" align="center"></el-table-column>
            <el-table-column label="操作" width="250" align="center">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        size="mini"
                        @click="bianji(scope.row, scope.$index)"
                        style="margin-right:20px"
                    >编辑</el-button>
                    <el-button type="danger" size="mini" @click="deleterole(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div v-if="tableData.length" class="pagination">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="page.num"
                :page-size="page.size"
                layout="total, prev, pager, next"
                :total="page.total"
            ></el-pagination>
        </div>

        <el-dialog title="管理员编辑" :visible.sync="dialog" width="37%" :show-close="false">
            <el-form :model="form" ref="closeform">
                <el-form-item label="管理员名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" class="elinput"></el-input>
                </el-form-item>
                <el-form-item label="管理员密码" :label-width="formLabelWidth">
                    <el-input v-model="form.password" autocomplete="off" class="elinput"></el-input>
                </el-form-item>
                <el-form-item label="管理员角色" :label-width="formLabelWidth">
                    <el-select
                        v-model="form.roleIds"
                        multiple
                        :multiple-limit="1"
                        placeholder="请选择管理模块"
                    >
                        <el-option
                            v-for="item in roleList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="closeDialog">取 消</el-button>
                    <el-button type="primary" @click="confirm">保 存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script scoped>
import { deleterole, updateAdmin, getRole, createAdmin } from "@/api/system";
import * as request from "@/api/system";
export default {
    data() {
        return {
            dialog: false,
            tableData: [],
            roleList: [],
            clickid: false,
            roleIds: "",
            form: {
                username: "",
                roleIds: [],
                region: "",
                name: "",
                delivery: false,
                type: [],
                resource: "",
                desc: ""
            },
            formLabelWidth: "120px",
            page: {
                size: 10,
                num: 1,
                total: 0,
            },
        };
    },
    created() {
        this.getRole();
        this.getData();
        this.panduan();
    },

    methods: {
        confirm() {
            if (this.clickid) {
                this.updateRole();
            } else if (!this.clickid) {
                this.createRole();
            }
        },
        handleCurrentChange(val) {
            this.page.num = val
            this.getData()
        },
        closeDialog() {
            this.dialog = false;
        },
        async deleterole(row) {
            let id = row.id;
            let query = {
                id
            };
            try {
                const { errno, errmsg } = await deleterole(query);
                if (errno === 0) {
                    this.getData();
                }
            } catch (err) {
                console.error(err);
            }
        },
        async updateRole() {
            let info = {
                id: this.clickid,
                username: this.form.name,
                password: this.form.password,
                roleIds: this.form.roleIds
            };
            try {
                const { errno, data, errmsg } = await updateAdmin(info);
                if (errno === 0) {
                    this.dialog = false;
                    this.getData();
                }
            } catch (err) {
                console.log(err);
            }
        },
        async createRole() {
            let creatinfo = {
                username: this.form.name,
                password: this.form.password,
                roleIds: this.form.roleIds
            };
            try {
                const { errno, data, errmsg } = await createAdmin(creatinfo);
                if (errno === 0) {
                    this.dialog = false;
                    this.getData();
                }
            } catch (err) {
                console.log(err);
            }
        },
        async getData() {
            let params = {
                username: this.form.username,
                page: this.page.num,
                limit: this.page.size,
            };
            try {
                const { errno, data, errmsg } = await request.getData(params);
                if (errno === 0) {
                    this.tableData = data.items;
                    this.page.total = data.total;
                    this.panduan();
                }
            } catch (err) {
                console.error(err);
            }
            this.dialog = false;
        },
        bianji(row) {
            console.log(row);
            if (row == 2) {
                this.clickid = "";
                this.dialog = true;
                this.form.name = "";
            } else {
                this.dialog = true;
                this.clickid = row.id;
                this.form.name = row.username;
            }
            console.log(this.clickid);
        },
        async getRole() {
            try {
                const { errno, data, errmsg } = await getRole();
                if (errno === 0) {
                    this.roleList = data;
                }
            } catch (err) {
                console.error(err);
            }
        },
        panduan() {
            console.log("for");
            for (let i = 0; i < this.roleList.length; i++) {
                for (let j = 0; j < this.tableData.length; j++) {
                    if (this.roleList[i].value === this.tableData[j].roleIds[0]) {
                        console.log(this.roleList[i].label);
                        this.tableData[j].roleIds[0] = this.roleList[i].label;
                    }
                }
            }
        }
    }
};
</script>
<style scoped>
.header {
    padding: 30px 30px 0;
    display: flex;
}
.headerinput {
    width: 300px;
    margin-right: 10px;
}
.rightbtn {
    margin: 0 30px 0 auto;
}
.elinput {
    width: 90%;
}
.pagination {
    margin: 25px 0;
    text-align: center;
}
</style>
